<template>
  <div class="father">
      <!-- 流程审批时间轴 -->
      <div class="block">
        <el-timeline :reverse="true">
          <el-timeline-item style="height: 150px;" :timestamp="activity.startTime | dateFormat('YYYY-MM-DD HH:mm:ss')" placement="top"
            v-for="(activity, index) in taskCommentList"
            :key="index"
            :icon="activity.icon"
            :type="activity.typePage"
            :color="activity.color"
            :size="activity.size"
            >
            <!-- 时间线流程图 -->
            <el-card class="el-card-custom" v-if="activity.type == 'init_type'" style="background-color: #F4F4F4;color: #909399;">
                <div style="float: left;margin-top: 30px;margin-right: 10px;">
                   <el-button @click="viewProcess(activity)" type="info" icon="el-icon-info" circle></el-button>
                </div>
                <div style="float: left;">
                  <h3 align="left">{{activity.taskName}}</h3>
                  <h4 align="left">{{activity.message}}</h4>
                </div>
            </el-card>
            <!-- 历史批注 -->
            <el-card class="el-card-custom" v-if="activity.time!=null">
              <div style="float: left;margin-top: 30px;margin-right: 10px;">
                 <el-button type="success" icon="el-icon-check" circle></el-button>
              </div>
              <div style="float: left;">
                <h4 align="left" style="margin: 0;padding: 0;margin-top: 4px;">审批节点：{{activity.taskName}}</h4>
                <h4 align="left" style="margin: 0;padding: 0;margin-top: 4px;">审批进度：结束</h4>
                <h4 align="left" style="margin: 0;padding: 0;margin-top: 4px;">审批类型：{{activity.type}}</h4>
                <h4 align="left" style="margin: 0;padding: 0;margin-top: 4px;">批注信息：{{activity.message}}</h4>
                <h4 align="left" style="margin: 0;padding: 0;margin-top: 4px;margin-bottom: 4px;">{{activity.userId}} 提交于 {{activity.time | dateFormat('YYYY-MM-DD HH:mm:ss')}}</h4>
              </div>
            </el-card>
            <!-- 当前任务 -->
            <el-card class="el-card-custom" v-if="activity.time == null && activity.type != 'init_type'">
              <div class="current_task">
                  <!-- 审批选项 -->
                  <el-tabs type="border-card">
                    <el-tab-pane>
                      <span class="audit_pass" slot="label"><i class="el-icon-success"></i> 审批通过</span>
                      <!-- 父组件传参数递给子组件 -->
                      <AuditPass :taskId="activity.taskId"></AuditPass>
                    </el-tab-pane>
                    <el-tab-pane>
                      <span class="audit_flow" slot="label"><i class="el-icon-sort"></i> 审批流转</span>
                      <AuditFlow :taskId="activity.taskId"></AuditFlow>
                    </el-tab-pane>
                    <el-tab-pane>
                      <span class="audit_overrule" slot="label"><i class="el-icon-bell"></i> 审批驳回</span>
                      <AuditOverrule></AuditOverrule>
                    </el-tab-pane>
                    <el-tab-pane>
                      <span class="audit_back" slot="label"><i class="el-icon-back"></i> 审批回退</span>
                      <AuditBack></AuditBack>
                    </el-tab-pane>
                    <el-tab-pane>
                      <span class="audit_delegate" slot="label"><i class="el-icon-user-solid"></i> 审批委派</span>
                      <AuditDelegate></AuditDelegate>
                    </el-tab-pane>
                    <el-tab-pane>
                      <span class="audit_turn" slot="label"><i class="el-icon-s-custom"></i> 审批转办</span>
                      <AuditTurn></AuditTurn>
                    </el-tab-pane>
                    <el-tab-pane>
                      <span class="audit_termination" slot="label"><i class="el-icon-circle-close"></i> 审批终止</span>
                      <AuditTermination></AuditTermination>
                    </el-tab-pane>
                  </el-tabs>
              </div>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </div>
  </div>
</template>

<script>

import AuditPass from '@/views/activity/innerModel/auditProcess/AuditPass.vue'
import AuditBack from '@/views/activity/innerModel/auditProcess/AuditBack.vue'
import AuditDelegate from '@/views/activity/innerModel/auditProcess/AuditDelegate.vue'
import AuditTermination from '@/views/activity/innerModel/auditProcess/AuditTermination.vue'
import AuditOverrule from '@/views/activity/innerModel/auditProcess/AuditOverrule.vue'
import AuditTurn from '@/views/activity/innerModel/auditProcess/AuditTurn.vue'
import AuditFlow from '@/views/activity/innerModel/auditProcess/AuditFlow.vue'

export default {
    components:{
      AuditPass,
      AuditFlow,
      AuditBack,
      AuditDelegate,
      AuditTermination,
      AuditOverrule,
      AuditTurn
    },
    name:"ProcessHandlingPage",
    data(){
        return{
            taskCommentList:[]
        }
    },
    mounted(){
        this.initTaskCommentList();
    },
    methods:{
        // 流程审批时间线
        initTaskCommentList(){
          this.loading = true;
          this.getRequest("/activity/ActRuTask/query/TaskCommentByProcessInstanceIdFilter/"+this.$route.query.processInstanceId).then(resp => {
              this.loading = false;
              if (resp) {
                  this.taskCommentList = resp.data;
                  this.taskCommentList.forEach((item,index) => {
                    this.$set(item,'size',"large");
                    this.$set(item,'typePage',"primary");
                    if(item.time!=null){
                      this.$set(item,'icon',"el-icon-bottom");
                      this.$set(item,'color',"#0bbd87");
                    }else{
                      this.$set(item,'color',"#FFB340");
                      this.$set(item,'icon',"el-icon-right");
                    }
                  })
                  let process = {
                    taskName:'审批流程图',
                    message:'点击查看审批流程图',
                    size:"large",
                    typePage:"primary",
                    icon:"",
                    color:"",
                    type:"init_type",
                    startTime:this.taskCommentList[0].startTime,
                    processInstanceId:this.taskCommentList[0].processInstanceId
                  }
                  this.taskCommentList.push(process);
              }
          });
        },
        // 查看审批流程图
        viewProcess(item){
          this.$router.push({
               path: '/TaskComment',
               // 参数传递
               query: {
                   processInstanceId:item.processInstanceId,
                   viewPage:'ProcessHandlingPage'
               }
           })
        }
    }
}
</script>

<style scoped>
  /* 禁用el-card内边距 */
  /deep/ .el-card__body{
    padding: 0px 0px 0px 0px;
  }
  .el-card-custom {
    float: left;
    background-color: #F1F9EE;
    color: #6CC43A;
    margin-top: 40px;
    width: 100%;
  }
  /* 时间线时间戳位置*/
  /deep/ .el-timeline-item__timestamp.is-top {
    position: absolute;
    margin-bottom: 8px;
    padding-top: 4px;
  }
  /deep/ .el-timeline {
      padding-left: 150px;
  }
  /deep/ .el-timeline-item__timestamp {
      color: #909399;
      line-height: 1;
      font-size: 13px;
  }
  /* 当前任务 */
  .current_task{
    border:2px dashed #cfcfcf;
    height:100%;
    width:100%;
    background-color: white;
    color: #000;
  }
  /* 选项卡 */
  /deep/ .el-tabs--border-card>.el-tabs__header .el-tabs__item {
      -webkit-transition: all .3s cubic-bezier(.645,.045,.355,1);
      transition: all .3s cubic-bezier(.645,.045,.355,1);
      border: 1px solid transparent;
      margin-top: -1px;
      /* color: #55ff7f; */
  }
  /deep/ .el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active {
      /* color: #ff007f; */
      /* background-color: #ff0000; */
      /* border-right-color: #ff5500; */
      /* border-left-color: #DCDFE6; */
  }
  .audit_pass{
    color: #67C23A;
  }
  .audit_overrule{
    color: #FFB340;
  }
  .audit_back{
    color: #409EFF;
  }
  .audit_delegate{
    color: #aa55ff;
  }
  .audit_turn{
    color: #00ffff;
  }
  .audit_termination{
    color: red;
  }
</style>
